<script setup lang="ts">
import _ from "lodash";
import {computed, ref, watch} from "vue";
import {message} from "ant-design-vue";
import {LikeOutlined, LikeTwoTone} from "@ant-design/icons-vue"
import {userConfigStore} from "@/store/user/userConfigStore";
import {addPraise, cancelPraise, getPraiseUserList} from "@/api/praise/praise";
import {ECode} from "@/util/commonUtil";
import {loginConfigStore} from "@/store/user/loginConfigStore";
import {v4 as uuidV4} from 'uuid';
import {useSysEventStore} from "@/store/system/SysEventStore";

const props = defineProps({
  resourceUid: {
    type: String,
    required: true
  },
  resourceType: {
    type: String,
    required: true
  }
});
const userPraiseList = ref<any>([])
const isPraise = ref<boolean>(false)
const random = ref<number>(0)
const userInfo: any = computed(() => userConfigStore().userInfo)
const isLogin = computed(() => userConfigStore().isLogin)

watch(() => props.resourceUid, () => {
  getPraiseUserListMethod()
})

function getPraiseUserListMethod() {
  if (!props.resourceUid || !props.resourceType) {
    return;
  }
  let params: any = {};
  params.resourceUid = props.resourceUid;
  params.resourceType = props.resourceType;
  isPraise.value = false;
  let userUid = userInfo.value.uid
  getPraiseUserList(params).then((res: any) => {
    if (res.code == ECode.SUCCESS) {
      userPraiseList.value = res.data;
      // 判断一下点赞中是否有自己
      let praiseList = res.data;
      for (let a = 0; a < praiseList.length; a++) {
        if (praiseList[a].uid === userUid) {
          isPraise.value = true;
          break;
        }
      }
    }
  })
}

function praise() {
  if (!isLogin.value) {
    message.warning("登录后才可以对文章进行点赞哦~")
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4());
    return;
  }
  let params: any = {};
  params.resourceUid = props.resourceUid;
  params.resourceType = props.resourceType;
  addPraise(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isPraise.value = true
      random.value = Math.random();
      getPraiseUserListMethod()
      useSysEventStore().setPraiseMessage(random.value)
    } else {
      message.warning(response.message)
    }
  })
}

function cancelUserPraise() {
  if (!isLogin.value) {
    message.warning("登录后才可以操作哦~")
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(uuidV4());
    return;
  }
  let params: any = {};
  params.resourceUid = props.resourceUid;
  params.resourceType = props.resourceType;
  cancelPraise(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isPraise.value = false
      random.value = Math.random();
      getPraiseUserListMethod()
      useSysEventStore().setPraiseMessage(random.value)
    } else {
      message.warning(response.message)
    }
  })
}
</script>

<template>
  <section class="bottomPraise w-full flex flex-col gap-4 justify-center items-center mt-4 mb-8">
    <!-- 文章点赞操作 -->
    <div class="praiseOperation">
      <a-button v-if="isPraise" type="default" size="large" shape="circle" class="flex items-center justify-center"
                @click="cancelUserPraise">
        <LikeTwoTone/>
      </a-button>
      <a-button type="default" size="large" shape="circle" class="flex items-center justify-center"
                v-else
                @click="praise">
        <LikeOutlined/>
      </a-button>
    </div>
    <!-- 文章点赞情况展示 -->
    <div class="praiseShowInfo flex flex-col gap-2 justify-center items-center">
      <div class="showTop">
        <span v-if="!_.isEmpty(userPraiseList)" class="text-gray-500">
          <span class="font-semibold text-rose-500">{{ userPraiseList.length }}</span>
          人已点赞
        </span>
        <span class="text-gray-500" v-else>都看完了，点个赞吧~</span>
      </div>
      <div class="showBottom">
        <a-avatar-group :max-count="5" size="large" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
          <template v-for="item in userPraiseList" :key="userInfo.uid">
            <a-avatar :src="item.photoUrl" :alt="item.nickName"/>
          </template>
        </a-avatar-group>
      </div>
    </div>
  </section>
</template>

<style scoped lang="less">

</style>
